<template>
  <div>
    <el-dialog
        v-model="visible"
        :title="$t('loc.ptCode')"
        width="800px"
        top="6vh"
        :close-on-click-modal="false"
        :before-close="handleClose"
        class="parent-codes-dialog"
        destroy-on-close
    >
      <div style="color: #303133;font-size:14px;font-weight: bold;opacity: 0.6">你可以点击列表中“生成邀请码”按钮生成单个孩子的家长邀请码，或点击“生成所有家长邀请码”按钮生成所有孩子的家长邀请码。</div>
      <div class="add-margin-bt10">
        <el-button type="primary" style="margin-left: 10px" @click="generateAllCodeClickHandler" :loading="submitLoading">生成所有家长邀请码</el-button>
      </div>
      <div v-loading="loading">
        <el-table :data="childParentCodeList" style="width: 100%">
          <el-table-column :label="$t('loc.student')" width="200px" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.childName }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('loc.ptCode')">
            <template #default="scope">
              <div>
                  <el-tag @close="closeCodeHandler(code)" v-for="code in scope.row.parentCodes" effect="dark" type="success" class="add-margin-bt5" style="margin-right: 5px" closable>{{ code }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="130px">
            <template #default="scope">
              <el-button @click="generateCodeClickHandler(scope.row.childId)">生成邀请码</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
      <span class="dialog-footer">
          <el-button @click="handleClose">
             {{ $t('loc.close') }}
          </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import ChildApi from "@/api/child";
import ParentApi from "@/api/parent";
import {useStore} from "vuex";
import {computed} from "vue";

export default {
  name: "invitationParentCodesDialog",
  props: ['dialogVisible', 'groupId'],
  setup(props, context) {
    const store = useStore()
    const currentUser = computed(() => store.state.user.currentUser)
    return {
      currentUser
    }
  },
  data() {
    return {
      loading: false,
      visible: false,
      children: [],
      visibleGroupIconDropdown: false,
      submitLoading: false,
    }
  },
  watch: {
    dialogVisible: {
      immediate: true,
      handler(newVal) {
        this.visible = newVal
        if (newVal) {
          this.initData()
        }
      },
    },
  },
  computed: {

    childParentCodeList() {
      return this.children.map(child => {
        return {
          childId: child.id,
          childName: child.displayName,
          parentCodes: child.invitationCodes
        }
      })
    }
  },
  methods: {
    initData() {
      this.loadChildren(this.groupId)
    },
    loadChildren(groupId) {
      if (!groupId) {
        return
      }
      this.loading = true
      let params = {
        groupId: groupId,
      }
      ChildApi.getChildren(params).then(res => {
        this.children = res.children
      }).catch(error => {
        this.$message.error(error.response.data.description)
      }).finally(() => {
        this.loading = false
      })
    },
    generateCodeClickHandler(childId) {
      this.generateParentCode([childId], this.currentUser.userId)
    },
    generateAllCodeClickHandler() {
      let childIds = this.children.map(child => child.id)
      this.generateParentCode(childIds, this.currentUser.userId)
    },
    generateParentCode(childIds, userId) {
      let params = {
        childIds: childIds,
        userId: userId
      }
      if (!childIds || childIds.length === 0 || !userId) {
        return
      }
      this.submitLoading = true
      ParentApi.generateParentsCode(params).then(res => {
        this.$message.success('生成成功')
        this.loadChildren(this.groupId)
      }).catch(error => {
        this.$message.error(error.response.data.description)
      }).finally(() => {
        this.submitLoading = false
      })
    },
    handleClose() {
      this.visible = false
      this.$emit('update:dialogVisible', this.visible)
    },
    closeCodeHandler(code) {
      this.submitLoading = true
      ParentApi.deleteParentCode(code).then(res => {
        this.$message.success('删除成功')
        this.loadChildren(this.groupId)
      }).catch(error => {
        this.$message.error(error.response.data.description)
      }).finally(() => {
        this.submitLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>